<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./public/css/download.css">
	<link rel="stylesheet" href="./public/css/swiper-bundle.min.css">
	<link rel="stylesheet" href="./public/css/swiper-bundle.css">
	<link rel="stylesheet" href="./public/css/common.css">
	<link rel="stylesheet" href="./public/css/message.min.css">
	<!-- <link href="./public/css/jquery.toast.min.css" rel="stylesheet"> -->

</head>

<body>
	<div id="header"></div>
	<div id="right"></div>
	<div id="container">
		<div class="banner">
			<img class="image" src="https://img.tongmen.cdn.dgyunju.cn/images/topImages/news.png" alt="">

		</div>
		<div id="app">
			<div class="page-container">
				<!-- 标签栏 (写死) -->
				<div class="tabs-item">
					<div class="el-row">
						<div class="el-col el-col-4 tab-list active" data-index="0" data-key="Product_data">
							<i class="icon fi fi-list"></i>
							<span>产品型录</span>
						</div>
						<div class="el-col el-col-4 tab-list" data-index="1" data-key="use_document">
							<i class="icon fi fi-manual"></i>
							<span>用户手册</span>
						</div>
						<div class="el-col el-col-4 tab-list" data-index="2" data-key="PDF_document">
							<i class="icon fi fi-pdf"></i>
							<span>产品应用资料</span>
						</div>
						<div class="el-col el-col-4 tab-list" data-index="3" data-key="protocol_documents">
							<i class="icon fi fi-sign"></i>
							<span>通信协议</span>
						</div>
						<div class="el-col el-col-4 tab-list" data-index="4" data-key="driven">
							<i class="icon fi fi-code"></i>
							<span>驱动&软件</span>
						</div>
						<div class="el-col el-col-4 tab-list" data-index="5" data-key="video">
							<i class="icon fi fi-video"></i>
							<span>产品视频</span>
						</div>
					</div>
				</div>

				<!-- 搜索栏 (写死) -->
				<div class="search-bar">
					<div class="el-row" style="justify-content: center;">
						<div class="el-col el-col-24 tip">
							请选择分类，再进行搜索
						</div>
						<div class="el-col el-col-12">
							<div class="el-input el-input--large flex">
								<input type="text" class="el-input__inner" placeholder="请输入您想查找的资料" id="keyword">
								<div class="el-input__append">
									<i class="icon fi fi-search" id="search-btn"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="download-container">
					<!-- 项目1 -->
					<a class="download-list" data-hash="abc123">
						<div class="top">
							<span class="title">产品手册2023完整版包含所有功能介绍</span>
							<button class="download-btn fi fi-download"></button>
						</div>
						<div class="bottom">
							<span class="type">资料类型: PDF文档</span>
							<span class="time">上传时间: 2023-01-01</span>
						</div>
					</a>

					<!-- 项目2 -->
					<a class="download-list" data-hash="def456">
						<div class="top">
							<span class="title">用户操作指南与常见问题</span>
							<button class="download-btn fi fi-download"></button>
						</div>
						<div class="bottom">
							<span class="type">资料类型: 使用文档</span>
							<span class="time">上传时间: 2023-02-15</span>
						</div>
					</a>

					<!-- 项目3 -->
					<a class="download-list" data-hash="ghi789">
						<div class="top">
							<span class="title">驱动程序v2.0支持Windows11</span>
							<button class="download-btn fi fi-download"></button>
						</div>
						<div class="bottom">
							<span class="type">资料类型: 驱动下载</span>
							<span class="time">上传时间: 2023-03-20</span>
						</div>
					</a>

					<!-- 项目4 -->
					<a class="download-list" data-hash="jkl012">
						<div class="top">
							<span class="title">API技术文档与接口说明</span>
							<button class="download-btn fi fi-download"></button>
						</div>
						<div class="bottom">
							<span class="type">资料类型: 技术文档</span>
							<span class="time">上传时间: 2023-04-05</span>
						</div>
					</a>

					<!-- 项目5 -->
					<a class="download-list" data-hash="mno345">
						<div class="top">
							<span class="title">产品技术白皮书与解决方案</span>
							<button class="download-btn fi fi-download"></button>
						</div>
						<div class="bottom">
							<span class="type">资料类型: 技术分析</span>
							<span class="time">上传时间: 2023-05-10</span>
						</div>
					</a>

					<!-- 项目6 -->
					<a class="download-list" data-hash="pqr678">
						<div class="top">
							<span class="title">用户服务协议与隐私条款</span>
							<button class="download-btn fi fi-download"></button>
						</div>
						<div class="bottom">
							<span class="type">资料类型: 协议文本</span>
							<span class="time">上传时间: 2023-06-25</span>
						</div>
					</a>
				</div>
				<div id="pagination" class="l-page"></div>

			</div>
		</div>

	</div>

	<div id="footer"></div>
	<script src="./public/js/jquery.min.js"></script>
	<script src="./public/js/message.min.js"></script>
	<!-- <script src="./public/js/jquery.toast.min.js"></script> -->
	<script src="./public/js/pagination.min.js"></script>
	<script src="./public/js/download.js"></script>
	<script src="./public/js/common.js"></script>
</body>

</html>